/*
 * @Author: 徐建辰
 * @Date: 2021-11-04 15:21:20
 * @LastEditTime: 2021-11-04 17:21:24
 * @LastEditors: Please set LastEditors
 * @Description: 日期选择器组件
 */
import React, {memo} from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Header from '@/components/Header'
import Month from './Month'
import './datepicker.css'

const DatePicker = memo(function DatePicker(props) {
  const {show, onSelectDate, onBack} = props
  console.log(show)
  const now = new Date()
  now.setHours(0)
  now.setMinutes(0)
  now.setSeconds(0)
  now.setMilliseconds(0)
  // 把日期重置为当前的1号
  now.setDate(1)
  // 获取当前月的零时刻
  const monthSequence = [now.getTime()]
  // 计算未来两个月
  now.setMonth(now.getMonth() + 1)
  monthSequence.push(now.getTime())
  now.setMonth(now.getMonth() + 1)
  monthSequence.push(now.getTime())

  return (
    <div className={classNames('date-selector', {hidden: !show})}>
      <Header title="日期选择" goBack={onBack} />
      <div className="date-selector-tables">
        {monthSequence.map(e => <Month key={e} startTimeMonth={e} onSelect={onSelectDate} />)}
      </div>
    </div>
  )
})

DatePicker.propTypes = {
  show: PropTypes.bool.isRequired,
  onBack: PropTypes.func.isRequired,
  onSelectDate: PropTypes.func.isRequired,
}

export default DatePicker

